import React from './react'
//import ReactDOM from './ReactDOM' //普通组件渲染
import ReactDOM from './ReactDOM/reactFun' //函数式组件渲染
//普通组件
// const element= (
//     <div className="xuke" style={{"background":"none"}} >
//         hello<span>xuke</span>
//         <p>我要下班啦</p>
//     </div>
// )
//函数式组件
// function Home(props){
//     return (
//     <div>{props.name}我要下班啦开心啊</div>
//     )
// }
//类组件
class Home extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            count: 0
        }
    }
    componentWillMount() {
        console.log("组件将要加载")
    }
    componentDidMount() {
        console.log("组件加载完成")
    }
    componentWillReceiveProps() {
        console.log("组件发生变化接受props")
    }
    componentWillUpdate() {
        console.log("组件将要更新")
    }
    componentDidUpdate() {
        console.log("组件更新完毕")
    }
    handleclick() {
        this.setState({ count: this.state.count+1 })
    }
    render() {
        return (
            <div>
                <p>我要下班啦开心啊{this.state.count} <button onClick={this.handleclick.bind(this)}>点我修改count</button></p>  
                {/* */}
                 
            </div>
        )
    }
}
ReactDOM.render(<Home name="xuke" />, document.querySelector("#root"))
